<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #left{
            height: 500;
            width: 200px;
            float: left;
        }
        select{
            height: 300px;
            width: 150px;
   
        }
        #opt{
          float: left;
          left: 200px;
        }
    </style>
</head>
<body>
        
        <div class="box">
             <div id="left">
                 <p>可选项</p>
                 <select multiple="multiple">
                     <option>dasd</option>
                     <option>dasd</option>
                     <option>dasd</option>
                     <option>dasd</option>
                 </select>
             </div>

             <div id="opt">
                 <input id="tor" type="button" value=">"><br>
                 <input id="tol" type="button" value="<"><br>
                 <input id="toAllr" type="button" value=">>"><br>
                 <input id="toAlll" type="button" value="<<"><br>
         
             </div>
             <div id="right">
                 <p>可选项</p>
                 <select multiple="multiple"></select>
             </div>
        </div>



        <script>
            $(function(){
                $("#tor").click(function()
             {
                // alert("d")
                 $("#right>select").append($("#left>select>option:selected"))
             })

             $("#tor").click(function()
             {
                 $("#left>select").append($("#right>select>option:select"))
             })

             $("#toAllr").click(function()
             {
                // alert("d")
                 $("#right>select").append($("#left>select>option"))
             })

             $("#toAlll").click(function()
             {
                 $("#left>select").append($("#right>select>option"))
             })
            })
           
        </script>


</body>
</html>